<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .line {
      display: flex;
      flex-wrap: wrap;
    }

    .line > .english,
    .line > .chinese {
      flex-basis: 100%; /* This will ensure that each takes full width */
      text-align: center; /* Center the text, if needed */
    }

    @media (min-width: 600px) {
      .line {
        flex-wrap: nowrap;
      }

      .line > .english,
      .line > .chinese {
        flex-basis: auto; /* They will now take up only the space they need */
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div class="line">
    <div class="english">English text here that might wrap sdfjsdlf sdflds jfldsfj sdkf sdlfjdsk jksdlf ksdjf lsdkjf slkdjfk sdjf lsdjflkdsjfkld skljfkds dls fjs</div>
    <div class="chinese">中文内容可能会换行 中文内容可能会换行 中文内容可能会换行 中文内容可能会换行 中文内容可能会换行 中文内容可能会换行 中文内容可能会换行 中文内容可能会换行中文内容可能会换行 </div>
  </div>
  <!-- Repeat for as many lines as needed -->
</div>

</body>
</html>